<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link  rel="stylesheet" type="text/css" href="../templateUI/layui/css/layui.css" />
    <title>Moc租户</title>
    <style>
        .layui-form-onswitch{
            border-color: #3399FF;
            background-color: #3399FF;
        }
        .layui-table-cell{
            height: auto;
            overflow:visible;
            text-overflow:initial;
            white-space:initial;
        }
        .page-container{
            padding: 30px;
        }
        .layui-btn.submit,.layui-btn.add{
            background-color: #3399FF;
            width: 100px;
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
        }
        .layui-btn.reset{
            border: 1px solid #3399FF;
            color: #3399FF;
            width: 100px;
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em{
            background-color: #3399FF;
        }
    </style>
</head>
<body>
<div class="page-container">
    <div class="moc-user">
        <form class="layui-form" action="" lay-filter="search_form">
            <div class="layui-form-item" style="font-size: 18px;font-weight: bolder;margin-bottom: 0">
                Moc租户列表
            </div>
            <div class="layui-form-item" style="text-align: right">
                <!--<div class="layui-inline">-->
                    <!--<input type="text" style="width: 320px" maxlength="50" name="user_name" placeholder="请输入账号名或操作接口" autocomplete="off" class="layui-input">-->
                <!--</div>-->
                <!--<div class="layui-inline">-->
                    <!--<input type="text" name="searchTime" style="width: 320px;text-align: center" class="layui-input" id="search-time" placeholder=" 开始日期 - 结束日期 ">-->
                <!--</div>-->
                <div class="layui-inline">
                    <!--<button class="layui-btn submit" type="button" lay-submit="" lay-filter="search_info">搜索</button>-->
                    <!--<button type="reset" class="layui-btn reset layui-btn-primary">重置</button>-->
                    <button class="layui-btn add" type="button" style="margin-left: 20px">添加租户</button>
                </div>
            </div>
        </form>
        <table class="layui-hide" id="moc-user" lay-filter="moc-user"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" style="background-color: #3399FF;color: #ffffff;" lay-event="edit">编辑</a>
        </script>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../static/js/jquery-3.31.min.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../templateUI/layui/layui.all.js"></script>
<script type="text/javascript">
    var laydate = layui.laydate, element = layui.element,form = layui.form;
    var host = '';
    //日期时间范围
    // laydate.render({
    //     elem: '#search-time'
    //     ,type: 'datetime'
    //     ,range: true
    // });

    var table = layui.table;
    var tableIns = table.render({
        elem: '#moc-user'
        ,title: 'Moc租户'
        ,url: host + '/api/Mocdistribution/getMoclist'
        ,headers: {"token":localStorage.getItem("token")}
        ,limit: 10
        ,request: {
            pageName: 'page' //页码的参数名称，默认：page
            ,limitName: 'size' //每页数据量的参数名，默认：limit
        }
        // ,toolbar: '#toolbarDemo'
        // ,toolbar: false
        ,cols: [[
            // {type: 'checkbox', fixed: 'left'}
            {type: 'space', hide:true}
            ,{field:'tmmoc_id', title:'租户ID', width:100, align:'center'}
            ,{field:'loginName', title:'账号名', align:'center'}
            ,{field:'domain_url', title:'项目域名', align:'center'}
            ,{ title:'操作', width: 150,align:'center',toolbar: '#barDemo'}
        ]]
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: [/*'count',*/ 'prev', 'page', 'next', 'skip'] //自定义分页布局
            ,curr: 1 //设定初始在第 5 页
            ,groups: 3 //只显示 1 个连续页码
            ,first: 1 //不显示首页
            // ,last: false //不显示尾页
        }
        ,done:function(res,curr,count){

        }
        ,response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
        ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
            $(".allCount").html(res.data.num);
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.num, //解析数据长度
                "data": res.data.list //解析数据列表
            };
        }
    });


    //监听行工具事件
    table.on('tool(moc-user)', function(obj){
        var info = obj.data;
        if (obj.event === 'edit'){
            //iframe层
            layer.open({
                type: 1,
                title:'编辑租户',
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 1, //不显示关闭按钮
                anim: 2,
                area: ['600px', '370px'], //宽高
                shadeClose: false, //开启遮罩关闭
                content: '<form class="layui-form" action="" style="margin-top: 50px;padding:0 30px">' +
                ' <div class="layui-form-item">\n' +
                '    <label class="layui-form-label" style="width: 80px"><span style="color: red;">*</span>租户账号名</label>\n' +
                '    <div class="layui-input-block" style="margin-left: 130px">\n' +
                '      <input type="text" name="loginName" value="'+info.loginName+'" lay-verify="required" placeholder="请输入租户账号名" autocomplete="off" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>'+
                ' <div class="layui-form-item" style="margin-top: 30px">\n' +
                '    <label class="layui-form-label" style="width: 80px"><span style="color: red;">*</span>项目域名</label>\n' +
                '    <div class="layui-input-block" style="margin-left: 130px">\n' +
                '      <input type="text" name="domain_url"  value="'+info.domain_url+'" lay-verify="required" placeholder="请输入项目域名" autocomplete="off" class="layui-input">\n' +
                '    </div>\n' +
                '  </div>'+
                ' <div class="layui-form-item" style="text-align: center;margin-top: 70px">\n'+
                '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""  lay-filter="submit">更新</button>'+
                '<button class="layui-btn layui-btn-sm layui-btn-primary cancel">取消</button>'+
                '  </div>'+
                '</form>'
            });
            $(".cancel").click(function () {
                layer.closeAll();
                return false
            })
            //监听提交
            form.on('submit(submit)', function(data){
                var field = data.field;
                if (field.loginName==""){
                    layer.msg('租户账号不为能为空！')
                    return false
                }else if (!(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(field.domain_url))){
                    layer.msg('请输入http://或https://域名')
                    return false
                }
                $.ajax({
                    url: host + '/api/Mocdistribution/setMocUser',
                    type: 'post',
                    headers:{
                        token:window.localStorage.getItem('token')
                    },
                    data:{
                        loginName: field.loginName,
                        domain_url: field.domain_url,
                        tmmoc_id: info.tmmoc_id,
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code==200){
                            layer.closeAll();
                            setTimeout(function () {
                                tableIns.reload();
                                layer.msg(data.msg);
                            },500)
                        } else{
                            layer.msg(data.msg)
                        }
                    },
                    error:function(){
                        layer.msg("网络错误，请稍后重试")
                    }
                });
                return false;
            });
        }
    });

    $(".add").click(function () {
        //iframe层
        layer.open({
            type: 1,
            title:'添加租户',
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //不显示关闭按钮
            anim: 2,
            area: ['600px', '370px'], //宽高
            shadeClose: false, //开启遮罩关闭
            content: '<form class="layui-form" action="" style="margin-top: 50px;padding:0 30px">' +
            ' <div class="layui-form-item">\n' +
            '    <label class="layui-form-label" style="width: 80px"><span style="color: red;">*</span>租户账号名</label>\n' +
            '    <div class="layui-input-block" style="margin-left: 130px">\n' +
            '      <input type="text" name="loginName" value="" lay-verify="required" placeholder="请输入租户账号名" autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            ' <div class="layui-form-item" style="margin-top: 30px">\n' +
            '    <label class="layui-form-label" style="width: 80px"><span style="color: red;">*</span>项目域名</label>\n' +
            '    <div class="layui-input-block" style="margin-left: 130px">\n' +
            '      <input type="text" name="domain_url" value="" lay-verify="required" placeholder="请输入项目域名" autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>'+
            ' <div class="layui-form-item" style="text-align: center;margin-top: 70px">\n'+
            '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit=""  lay-filter="submit">确认</button>'+
            '<button class="layui-btn layui-btn-sm layui-btn-primary cancel">取消</button>'+
            '  </div>'+
            '</form>'
        });
        $(".cancel").click(function () {
            layer.closeAll();
            return false
        })
        //监听提交
        form.on('submit(submit)', function(data){
            var field = data.field;
            if (field.loginName==""){
                layer.msg('租户账号不为能为空！')
                return false
            }else if (!(/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/.test(field.domain_url))){
                layer.msg('请输入http://或https://域名');
                return false
            }
            $.ajax({
                url: host + '/api/Mocdistribution/setMocUser',
                type: 'post',
                headers:{
                    token:window.localStorage.getItem('token')
                },
                data:{
                    loginName: field.loginName,
                    domain_url: field.domain_url,
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code==200){
                        layer.closeAll();
                        setTimeout(function () {
                            tableIns.reload();
                            layer.msg(data.msg);
                        },500)
                    } else{
                        layer.msg(data.msg)
                    }
                },
                error:function(){
                    layer.msg("网络错误，请稍后重试")
                }
            });
            return false;
        });
    });

    function formatUnixtimestamp(unixtimestamp,type) {
        var newunixtimestamp = new Date(unixtimestamp * 1000);
        var year = 1900 + newunixtimestamp.getYear();
        var month = "0" + (newunixtimestamp.getMonth() + 1);
        var date = "0" + newunixtimestamp.getDate();
        var hour = "0" + newunixtimestamp.getHours();
        var minute = "0" + newunixtimestamp.getMinutes();
        var second = "0" + newunixtimestamp.getSeconds();
        if (type==1){
            return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
                + " " + hour.substring(hour.length - 2, hour.length) + ":"
                + minute.substring(minute.length - 2, minute.length)
                + ":"
                + second.substring(second.length - 2, second.length);
        } else{
            return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
        }
    }
</script>
</body>
</html>